<section class="content-header">
  <h1>
      {{title}}
  </h1>
</section>

<!-- Main content -->
<section class="content">
  <div class="row">
      <div class="col-md-3 col-md-push-9">
          <div class="box box-default">
              <div class="box-header with-border">
                  <h3 class="box-title">查询区域</h3>
                  <div class="box-tools pull-right">
                      <button type="button" class="btn btn-box-tool" data-widget="collapse">
                          <i class="fa fa-minus"></i>
                      </button>
                  </div>
              </div>
              <!-- /.box-header -->
              <div class="box-body">
                  <!-- <div class="form-group">
                      <label>区域</label>
                      <dx-select-box #subArea style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="subAreaItems" displayExpr="subArea"
                          [(selectedItem)]="subAreaSelected" (onValueChanged)="onSubAreaSelectedChange($event)" [value]="subAreaItems[0]"
                          [searchEnabled]="true">
                      </dx-select-box>
                  </div> -->
              </div>
              <div class="box-footer">
                  <button type="button" class="btn btn-primary" (click)="getReportData()"> 查 询 </button>
              </div>
          </div>
      </div>
      <div class="col-md-9 col-md-pull-3">
          <div class="box box-default">
              <div class="box-header with-border">
                  <h3 class="box-title">{{title}}查询</h3>
                  <div class="box-tools pull-right">
                      <button type="button" class="btn btn-box-tool" data-widget="collapse">
                          <i class="fa fa-minus"></i>
                      </button>
                  </div>
              </div>
              <div class="box-header with-border">
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#template" (click)="addData()">
                        添加
                    </button>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#template" (click)="editData()">
                        编辑
                    </button>
                    <button type="button" class="btn btn-primary" (click)="pauseData()">
                        暂停
                    </button>
                    <button type="button" class="btn btn-primary" (click)="resumeData()">
                        恢复
                    </button>
                    <button type="button" class="btn btn-primary" style="color: red;" (click)="deleteData()">
                        删除
                    </button>
                </div>
            </div>
              <!-- /.box-header -->
              <!-- /.box-header -->
              <div class="box-body">
                <dx-data-grid #dataGrid [dataSource]="items" [showColumnLines]="true" [showRowLines]="true" 
                [showBorders]="true" [rowAlternationEnabled]="true" (onRowClick)="rowClick($event)" [columnMinWidth]="50" [columnAutoWidth]="true">
                    <dxo-paging [pageSize]="10"></dxo-paging>
                    <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                    </dxo-pager>
                    <dxo-selection mode="single"></dxo-selection>
                    <dxi-column [allowEditing]="false" dataField="jobName" caption="任务名称" >
                    </dxi-column>
                    <dxi-column [allowEditing]="false" dataField="description" caption="任务描述" >
                    </dxi-column>
                    <dxi-column [allowEditing]="false" dataField="jobClassName" caption="任务类名" >
                    </dxi-column>
                    <dxi-column [allowEditing]="false" dataField="jobGroupName" caption="任务组名" >
                    </dxi-column>
                    <dxi-column [allowEditing]="false" dataField="cron" caption="cron表达式" >
                    </dxi-column>
                    <dxi-column [allowEditing]="false" dataField="subAreas" caption="区域" >
                    </dxi-column>
                    <dxi-column [allowEditing]="false" dataField="emailAddresses" caption="邮件地址" >
                    </dxi-column>
                    <dxi-column [allowEditing]="false" dataField="startTime" caption="开始时间" >
                    </dxi-column>
                    <dxi-column [allowEditing]="false" dataField="endTime" caption="结束时间" >
                    </dxi-column>
                    <dxi-column [allowEditing]="false" dataField="statusText" caption="任务状态">
                    </dxi-column>
                </dx-data-grid>
            </div>
          </div>
      </div>
  </div>
</section>

<div class="modal fade" id="template" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">{{title+operation}}</h4>
            </div>
            <p style="color: red; padding-left: 15px;" *ngIf="!isRowSelected && operation === '编辑'">注意：未选中行数据</p>
            <div class="modal-body">
                <div class="form-group">
                    <label for="DateTimeRange">任务名称</label>
                    <input type="text"style="width: 60%; height: 30px;" [(ngModel)]="jobName" placeholder="请输入任务名称" [disabled]="operation === '编辑'">
                </div>
                <div class="form-group">
                    <label for="DateTimeRange">任务描述</label>
                    <input type="text"style="width: 60%; height: 30px;" [(ngModel)]="description" placeholder="请输入任务描述">
                </div>
                <!-- <div class="form-group">
                    <label for="DateTimeRange">任务组名</label>
                    <input type="text"style="width: 60%; height: 30px;" [(ngModel)]="jobGroupName" placeholder="请输入任务组名" [disabled]="operation === '编辑'">
                </div> -->
                <div class="form-group">
                    <label for="DateTimeRange">任务类名</label>
                    <dx-select-box #class style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="classItem" displayExpr="key"
                        [(selectedItem)]="jobClassName" [value]="jobClassName" [disabled]="operation === '编辑'">
                    </dx-select-box>
                    <!-- <input type="text"style="width: 60%; height: 30px;" [(ngModel)]="jobClassName" placeholder="请输入任务类名" [disabled]="operation === '编辑'"> -->
                </div>
                <div class="form-group">
                    <label>执行周期</label>
                    <dx-select-box #cron style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="cronItem" displayExpr="key"
                        [(selectedItem)]="cronSelected" [value]="cronSelected">
                    </dx-select-box>
                </div>
                <div class="form-group">
                    <label>区域</label>
                    <dx-drop-down-box #ddda style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [(value)]="subAreaSelected"
                        displayExpr="subArea" placeholder="请选择区域" [showClearButton]="true" [dataSource]="subAreaItems">
                        <dxo-drop-down-options [height]="340"></dxo-drop-down-options>
                        <div *dxTemplate="let data of 'content'">
                            <button type="button" (click)="clearSubAreaSelected()" class="btn btn-default btn-sm" title="重置">重置</button>&nbsp;&nbsp;&nbsp;
                            <button type="button" (click)="subAreaSelectedOk()" class="btn btn-info btn-sm" title="确定">确定</button>
                            <dx-data-grid [dataSource]="subAreaItems" [hoverStateEnabled]="true" [paging]="{ enabled: true, pageSize: 1000 }" [filterRow]="{ visible: true }"
                                [(selectedRowKeys)]="subAreaSelected" [scrolling]="{ mode: 'infinite' }" [height]="265" [showColumnLines]="true"
                                [showRowLines]="true" [showBorders]="true" [rowAlternationEnabled]="true">
                                <dxo-selection [selectAllMode]="allPages" [showCheckBoxesMode]="always" mode="multiple"></dxo-selection>
                                <dxi-column dataField="subArea" caption="区域" [width]="100">
                                </dxi-column>
                            </dx-data-grid>
                        </div>
                    </dx-drop-down-box>
                </div>
                <div class="form-group">
                    <label>数据时间范围</label>
                    <!-- <input type="text" class="form-control pull-right" id="DateTimeRange" placeholder="请选择日期" /> -->
                    <dx-select-box #date style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="dateItem" displayExpr="key"
                        [(selectedItem)]="dateSelected" [value]="dateSelected">
                    </dx-select-box>
                </div>
                <div class="form-group">
                    <label>收件人</label>
                    <!-- <dx-select-box #emailAddresses style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="emailAddressesItem" displayExpr="name"
                        [(selectedItem)]="emailAddressesSelected" [value]="emailAddressesSelected">
                    </dx-select-box> -->
                    <dx-drop-down-box #dddb style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [(value)]="emailAddressesSelected"
                        displayExpr="email" placeholder="请选择邮箱地址" [showClearButton]="true" [dataSource]="emailAddressesItem">
                        <dxo-drop-down-options [height]="340"></dxo-drop-down-options>
                        <div *dxTemplate="let data of 'content'">
                            <button type="button" (click)="clearEmailAddressesSelected()" class="btn btn-default btn-sm" title="重置">重置</button>&nbsp;&nbsp;&nbsp;
                            <button type="button" (click)="emailAddressesSelectedOk()" class="btn btn-info btn-sm" title="确定">确定</button>
                            <dx-data-grid [dataSource]="emailAddressesItem" [hoverStateEnabled]="true" [paging]="{ enabled: true, pageSize: 1000 }" [filterRow]="{ visible: true }"
                                [(selectedRowKeys)]="emailAddressesSelected" [scrolling]="{ mode: 'infinite' }" [height]="265" [showColumnLines]="true"
                                [showRowLines]="true" [showBorders]="true" [rowAlternationEnabled]="true">
                                <dxo-selection [selectAllMode]="allPages" [showCheckBoxesMode]="always" mode="multiple"></dxo-selection>
                                <dxi-column dataField="id" caption="用户" [width]="100">
                                </dxi-column>
                                <dxi-column dataField="email" caption="邮箱" [width]="350">
                                </dxi-column>
                            </dx-data-grid>
                        </div>
                    </dx-drop-down-box>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-right" data-dismiss="modal" (click)="submitData()">确定</button>
                <button type="button" class="btn btn-default pull-right" data-dismiss="modal">关闭</button>
            </div>
        </div>

    </div>
</div>
